<% layout('../layouts/layout') %>
<% include ../../layouts/layout.header.ejs %>
<link href="/css/detail_all.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="text-center echart-details industryList-detail">
            <h1 class="echart-details-title">开发区行业分布情况</h1>
            <div id="industryList" class="echart-details-content"></div>
            <div class="echart-details-explain">
                <h3>数据解读：</h3>
                <div id="echart-details-explain-content"></div>
            </div>
        </div>
    </div>
</div>
<script src="/libs/jQuery/jquery.min.js"></script>
<script src="/libs/echart/echarts.min.js"></script>
<script>
$(function(){

    if($(".industryList-detail").length > 0){

        $.ajax({
            url:'/devtZoneMarketSubject/kfqCommonService/api/gz/lg/industry/industryList.v',
            type: "POST",
            dataType: "json",
            data: {},
            success: function(data){

                // 百分比转小数
                function toPoint(percent){
                    var str=percent.replace("%","");
                    str= str/100;
                    return str;
                }
                // 小数转百分比
                function toPercent(point){
                    var str=Number(point*100).toFixed(1);
                    str+="%";
                    return str;
                }

                console.log("====================");
                console.log(data);
                if(data.status == "200"){

                    // 显示内容值
                    var oHtml       = "";                   // 内容
                    var oAllNum     = data.data.length;     // 总行业数
                    var oAllPercent = 0;                    // 前十百分比;
                    for(var i =0; i<10;i++){
                        oAllPercent += toPoint(data.data[i].per);
                    }
                    // 处理内容
                    oHtml = '<p>数据显示，目前开发区共涉及'+ oAllNum +'行业，其中排行前10的行业占比'+ toPercent(oAllPercent) +'。以下是排行前10的具体行业数据：</p>';
                    for(var i =0; i<10;i++){
                        oHtml += '<p>'+(i+1)+'、'+ data.data[i].industryName +'行业，共有'+ data.data[i].industryNum +'家企业，占比'+ data.data[i].per +'</p>';
                    }
                    // 展示内容
                    $("#echart-details-explain-content").html(oHtml);

                    var legendData = [];        // 各行业名称的本地数组列表
                    var seriesData = [];        // 各行业的本地数据列表
                    var oData = data.data;      // ajax请求过来的真实数据
                    var obj = {};               // 空对象，用于转换各行业本地数据

                    // 转换各行业名称，以便适用于 echarts 风格
                    for(var i=0;i<9;i++){
                        legendData.push(oData[i].industryName);

                    }
                    // 转换各行业数据，以便适用于 echarts 风格
                    for(var i=0;i<9;i++){
                        obj = {
                            name: oData[i].industryName,
                            value: oData[i].industryNum
                        }
                        seriesData.push(obj);
                    }



                    // 基于准备好的dom，初始化 echarts 实例
                    var myChart = echarts.init(document.getElementById('industryList'));
                    // echarts 的数据模型
                    var option = {
                        legend: {
                            orient: 'vertical',
                            right: '0%',
                            top : '20%',
                            data: legendData
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '50%'],
                                data:seriesData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                }else{
                    layer.msg("商事接口报错");
                }


            },
            error:function(){
                layer.msg("商事接口报错");
            }

        })



    }

})
</script>
<% include ../../layouts/layout.footer.ejs %>